let THREE = require("three");
import { OBJECTS } from "../../app/declarations.js";
import { TOOLS } from "../tools/tools.js";

let textures, t, materials;

let MATERIAL = {
  init: () => {
    materials = OBJECTS.materials;
    textures = OBJECTS.textures;
    t = TOOLS;

    textures.test.wrapS = THREE.RepeatWrapping;
    textures.test.wrapT = THREE.RepeatWrapping;

    // textures.test.wrapS = THREE.ClampToEdgeWrapping;
    // textures.test.wrapT = THREE.ClampToEdgeWrapping;

    textures.test.magFilter = THREE.NearestFilter;
    textures.test.minFilter = THREE.NearestFilter;

    textures.test.repeat.set(10, 1);

    // textures.test.repeat.set(1 / 3, 1 / 3);
    // textures.test.offset.set(0.1, 0.5);

    textures.bg.mapping = THREE.EquirectangularReflectionMapping;

    materials.basic = new THREE.MeshNormalMaterial({ wireframe: true });

    materials.normal = t.create.material({
      type: "normal",
      name: "normalmtl",
      prop: {
        wireframe: false,
        side: THREE.DoubleSide,
      },
    });

    materials.normalwire = t.create.material({
      type: "normal",
      name: "normalmtl",
      prop: {
        wireframe: true,
        side: THREE.DoubleSide,
      },
    });

    var canvas = document.createElement('canvas');
    canvas.width = 256;
    canvas.height = 1;

    // 获取上下文
    var context = canvas.getContext('2d');

    // 填充渐变到Canvas
    context.fillStyle = '#ffa500';
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = '#000000';
    context.fillRect(6, 0, 10, canvas.height);

    // context.fillStyle = '#000000';
    context.fillRect(36, 0, 10, canvas.height);

    // context.fillStyle = '#000000';
    context.fillRect(66, 0, 120, canvas.height);

    // context.fillStyle = '#000000';
    context.fillRect(236, 0, 10, canvas.height);
    // context.fillRect(256, 0, 10, 1);


    var texture = new THREE.CanvasTexture(canvas);
    texture.repeat.set(1,1);

    materials.trail_draw = new THREE.MeshBasicMaterial({
      color: 0x111111,
      // map: texture,
    });

    // textured

    materials.trail_drive = new THREE.MeshPhongMaterial({
      // map: textures.test,
      // transparent: true,
      // alphaTest: 0.1,
      color: 0xffa500,
      side: THREE.DoubleSide,
      wireframe:true,
    });

    // flat

    // 创建一个HTMLCanvasElement
    

    materials.trail_drive = new THREE.MeshLambertMaterial({
      // color: 0x707070,
      // color: 0xffffff,
      color: 0x333333,
      // map: texture,
      // map: textures.test,
      transparent: false,
      alphaTest: 0.1,
      roughness: 1,
      side: THREE.FrontSide,
      // flatShading:true,
      // wireframe:true,
    });

    // textures.dash.anisotropy =
    textures.dash.anisotropy = 16;
    textures.dash.repeat.set(8, 0.5);
    textures.dash.wrapS = THREE.RepeatWrapping;
    textures.dash.wrapT = THREE.RepeatWrapping;

    textures.dash2.anisotropy = 16;
    textures.dash2.repeat.set(4, 0.5);
    textures.dash2.wrapS = THREE.RepeatWrapping;
    textures.dash2.wrapT = THREE.RepeatWrapping;

    textures.dash3.anisotropy = 16;
    textures.dash3.repeat.set(6, 1);
    textures.dash3.wrapS = THREE.RepeatWrapping;
    textures.dash3.wrapT = THREE.RepeatWrapping;


    materials.dash = new THREE.MeshBasicMaterial({
      color: 0x000000,
      transparent: true,
      alphaMap: textures.dash,
      //map: texture.dash,
      side: THREE.DoubleSide,
      alphaTest: 0.1,
      opacity: 0,
    });
    materials.dash2 = new THREE.MeshBasicMaterial({
      color: 0x000000,
      transparent: true,
      alphaMap: textures.dash2,
      side: THREE.BackSide,
      alphaTest: 0.1,
      opacity: 0,
    });

    materials.dash3 = new THREE.MeshBasicMaterial({
      color: 0xffa500,
      transparent: true,
      alphaMap: textures.dash3,
      side: THREE.DoubleSide,
      alphaTest: 0.1,
      opacity: 0,//
    });

    // materials.trail_drive = new THREE.MeshPhongMaterial({
    //   color: 0xffa500,
    //   // emissive: 0xffa500,
    //   emissiveIntensity: 0,
    //   reflectivity:0,
    //   roughness: 1,
    //   flatShading:false,
    // })

    materials.arrow_block = new THREE.MeshBasicMaterial({
      color: 0xffa500,
      depthTest: false,
    });

    materials.invisible = new THREE.MeshBasicMaterial({
      color: 0xffffff,
      opacity: 0,
      transparent: true,
      alphaTest: 0.1,
    });

    // materials.trail = new THREE.MeshBasicMaterial({
    //   emissive: new THREE.Color(1,0,0),
    //   map: textures.test,
    //   transparent: true,
    //   alphaTest: 0.1,
    //   color: 0xffa500,
    //   side: THREE.DoubleSide,
    //   flatShading : false,
    //   // wireframe:true,

    // });

    // materials.arrow = new THREE.MeshPhongMaterial({
    //   color:new THREE.Color(0.5,0.5,0.5),
    // })

    materials.arrow = new THREE.MeshPhysicalMaterial({
      color: new THREE.Color(0.1, 0.1, 0.1),
      // color:new THREE.Color(0,0,0),
      envMap: textures.bg,
      reflectivity: 1,
      metalness: 0.8,
      roughness: 0.5,
      reflectivity: 1,
      clearcoat: true,
    });

    // materials.arrow = new THREE.MeshBasicMaterial({
    //   color: 0x000000
    // })

    // materials.dots = new THREE.MeshBasicMaterial({
    //   color: 0xffffff
    // });

    materials.dots = new THREE.MeshPhongMaterial({
      color: new THREE.Color(0.5, 0.5, 0.5),
    });
  },

  tick: () => {
    // textures.test.offset.y += 0.01
    // textures.test.offset.x += 0.01
    // console.log('okok')
    const delta = OBJECTS.delta;
    
    textures.dash.offset.x += delta / 4;
    textures.dash2.offset.x += delta / 2;
    textures.dash3.offset.x += delta / 4;
  },
};

export { MATERIAL };
